<!--
 * @Description: 
 * @Date: 2023-02-23 14:20:59
 * @LastEditors: czp
 * @LastEditTime: 2023-04-19 16:05:31
-->
<template>
	<div class="header">
		<el-image @click="toHome" class="logo" :src="cosPrefix + 'header/LOGO.png?imageMogr2/thumbnail/375x'" />

		<div class="menu-list">
			<div
				@click="pageJump(item.path)"
				:class="['menu', { active: activePath == item.path }]"
				v-for="(item, index) in menuList"
				:key="index"
				@mouseenter="menuIndex = index"
				@mouseleave="menuIndex = -1"
			>
				{{ item.name }}
				<div v-show="menuIndex == index" class="mask">
					<el-image class="mask-cover" :src="cosPrefix + item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
					<div>
						<span @click.stop="pageJump(child.path, { categoryIndex: childIndex })" v-for="(child, childIndex) in item.children" :key="child.path">
							{{ child.name }}
						</span>
					</div>
				</div>
			</div>
		</div>

		<ToolRight />
	</div>
</template>
<script setup lang="ts" name="BaseNavbar">
import { useVR } from "@/hook/useVR";
import { useBaseStore } from "@/store/base";

// 获取 cos前缀 菜单列表
const { cosPrefix, menuList } = useBaseStore();

// 获取 当前的路径
const { activePath } = storeToRefs(useBaseStore());

// 获取 页面跳转 跳转首页 方法
const { pageJump, toHome } = useVR();

// 当前菜单索引
const menuIndex = ref(-1);
</script>
<style lang="scss" scoped>
.header {
	position: fixed;
	top: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 72px;
	padding: 0 50px;
	background-color: rgb(0 0 0 / 10%);
	border-bottom: 1px solid #ffffff;
	.logo {
		width: 150px;
		height: 46px;
		cursor: pointer;
	}
	.menu-list {
		display: flex;
		justify-content: space-around;
		width: 60%;
		height: 100%;
		font-family: SourceSerif;
		font-size: 20px;
		font-weight: bold;
		color: #ffffff;
		cursor: pointer;
		.menu {
			display: flex;
			align-items: center;
			border-bottom: 4px solid transparent;
			&:hover,
			&.active {
				color: $theme-color;
				border-bottom: 4px solid #ffffff;
			}
		}
		.mask {
			position: absolute;
			top: 72px;
			left: 0;
			z-index: 4;
			display: flex;
			width: 100%;
			height: 140px;
			padding: 20px 460px;
			background-color: rgb(0 0 0 / 40%);
			.mask-cover {
				width: 200px;
				height: 100px;
				margin-right: 40px;
			}
			> div {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				span {
					font-size: 24px;
					color: #ffffff;
					&:hover {
						color: $theme-color;
					}
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.header {
		height: 44px;
		padding: 0 16px;
		.logo {
			height: 100%;
			cursor: pointer;
		}
	}
	.menu-list {
		display: none !important;
	}
}
</style>
